<template>
    <div id="allmap"></div>
  </template>
  
  <script setup>
    import { onMounted } from 'vue'

    onMounted(() => {

//   import * as THREE from 'three';
  // GL版命名空间为BMapGL
  // 按住鼠标右键，修改倾斜角和角度
  var map = new BMapGL.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMapGL.Point(121.075965,32.056276), 0);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	// map.setHeading(64.5); //旋转角度
	// map.setTilt(73);         //倾斜角度
  map.setMapType(BMAP_EARTH_MAP); // 设置为地球模式 BMAP_SATELLITE_MAP


  // 添加控件
  var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
  map.addControl(zoomCtrl);
  var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
  map.addControl(cityCtrl);

  var projection = mapvgl.MercatorProjection;
  var point = projection.convertLL2MC(new BMapGL.Point(121.07535, 32.056743));
  map.enableKeyboard();
  map.enableScrollWheelZoom();
  map.enableInertialDragging();
  map.enableContinuousZoom();

  var view = new mapvgl.View({
    map: map
    });
  var threeLayer = new mapvgl.ThreeLayer();
//   const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
//   threeLayer.scene.add(ambientLight);
  view.addLayer(threeLayer);
  var scene = null;
  
  //加载gltf模型
//   const loader = new THREE.GLTFLoader();
//   loader.load('../model.gltf', function (gltf) {
//                 gltf.scenes[0].position.x = point.lng;
//                 gltf.scenes[0].position.y = point.lat;
//                 gltf.scenes[0].position.z = 100;
//                 gltf.scenes[0].rotation.set(Math.PI / 2, 0, 0);
//                 scene = gltf.scenes[0];
//                 const ambientLight = new THREE.AmbientLight(0xffff00, 0.7);
//                 scene.add(ambientLight);
////                 threeLayer.add(scene)
//             });

//加载ply 
const plyLoader = new THREE.PLYLoader();
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
threeLayer.scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.set(1, 1, 1).normalize();
threeLayer.scene.add(directionalLight);
plyLoader.load('../output_mini.ply', (geometry) => {
  const material = new THREE.PointsMaterial({
    // color: 0x3f3f3f, // 点云颜色
    size: 0.1,       // 点的大小
    vertexColors: true,
  });

  const points = new THREE.Points(geometry, material);
  points.position.x = point.lng;
  points.position.y = point.lat;
  points.position.z = 0;
  points.scale.set(10,10,10);
  scene = points;
//   threeLayer.add(scene);
});

var vertices = [
    new BMapGL.Point(121.074317,32.05812), // 顶点1
    new BMapGL.Point(121.075736,32.058173), // 顶点2
    new BMapGL.Point(121.075934,32.055924), // 顶点3
    new BMapGL.Point(121.074406,32.055955),  // 顶点4
    new BMapGL.Point(121.074317,32.05812)   // 回到顶点1，闭合多边形
];
// 创建3D棱柱
var prism = new BMapGL.Prism(vertices, 250, {
    topFillColor: '#5679ea',    // 顶部填充颜色
    topFillOpacity: 0.3,        // 顶部填充透明度
    sideFillColor: '#5679ea',   // 侧面填充颜色
    sideFillOpacity: 0.3        // 侧面填充透明度
});
// 绑定鼠标事件
var events = ['click', 'mouseover', 'mouseout'];
for (let i = 0; i < events.length; i++) {
    prism.addEventListener(events[i], e => {
        switch (events[i]) {
            case 'click':
                 alert('办公地点');
               break;
            case 'mouseover':
                e.target.setTopFillColor('#475fab'); // 鼠标悬停时改变顶部颜色
                 e.target.setTopFillOpacity(1);       // 鼠标悬停时改变顶部透明度
                  break;
          case 'mouseout':
                e.target.setTopFillColor('#5679ea'); // 鼠标移出时恢复顶部颜色
                 e.target.setTopFillOpacity(0.6);     // 鼠标移出时恢复顶部透明度
                   break;
           }
       });
    }

    //二级标记
    const icon = new BMapGL.Icon('../location.png', new BMapGL.Size(32, 32)); // 图标路径和大小
    const location = new BMapGL.Point(121.075377,32.057095);
    const marker1 = new BMapGL.Marker(location, { icon: icon });
    marker1.addEventListener('click', function (e) {
        map.centerAndZoom(location, 18); 
        setTimeout(() => {
            map.setHeading(64.5); //旋转角度
            map.setTilt(73); 
        }, 2500); 
    });
    const marker2 = new BMapGL.Marker(new BMapGL.Point(121.678301,31.826359), { icon: icon });
    marker2.addEventListener('click', function (e) {
        alert('没有数据');
    });121.015999,31.814577
    const marker3 = new BMapGL.Marker(new BMapGL.Point(121.015999,31.814577), { icon: icon });
    marker3.addEventListener('click', function (e) {
        alert('没有数据');
    });

    //一级标记
    const firstOverlays = [];
    var bd1 = new BMapGL.Boundary();
    bd1.get('南通市', function (rs) {
    let count = rs.boundaries.length;
    for (let i = 0; i < count; i++) {
        let path = [];
        let str = rs.boundaries[i].replace(' ', '');
        let points = str.split(';');
        for (let j = 0; j < points.length; j++) {
            let lng = points[j].split(',')[0];
            let lat = points[j].split(',')[1];
            path.push(new BMapGL.Point(lng, lat));
        }
        let prism = new BMapGL.Prism(path, 5000, {
            topFillColor: '#5679ea',
            topFillOpacity: 0.6,
            sideFillColor: '#5679ea',
            sideFillOpacity: 0.9
        });
        firstOverlays.push(prism);
        // 绑定鼠标事件
        var events = ['click', 'mouseover', 'mouseout'];
        for (let i = 0; i < events.length; i++) {
            prism.addEventListener(events[i], e => {
                switch (events[i]) {
                    case 'click':
                        map.centerAndZoom(new BMapGL.Point(121.137881,31.985265), 12); 
                        break;
                    case 'mouseover':
                        e.target.setTopFillColor('#475fab');
                        e.target.setTopFillOpacity(1);
                        break;
                    case 'mouseout':
                        e.target.setTopFillColor('#5679ea');
                        e.target.setTopFillOpacity(0.5);
                        break;
                }
            }); 
        }
    }
});


//监听级别，切换视图模式
map.addEventListener('zoomend',function(){
    var currentZoom = map.getZoom(); 
    console.log("zoom:"+currentZoom);
    // map.setDisplayOptions({poiText: false,poiIcon: false})
    map.hideStreetLayer();
    map.hideVectorStreetLayer();

    //添加一级标记
    if (currentZoom >6 && currentZoom <= 11){
        addFirstOverlay(true)
    } else {
        addFirstOverlay(false)
    }

    //控制显示二级标记层
    if (currentZoom > 11 && currentZoom < 16) {
        addSecondOverlay(true)
    } else {
        addSecondOverlay(false)
    }
    //添加三级标记
    if (currentZoom >= 16) {
        addOverlay(true)
        addThreejsObj(true)
    } else {
        addOverlay(false)
        addThreejsObj(false)
    }

    //控制显示地球模式
    if (currentZoom > 6) {
        map.setMapType(BMAP_SATELLITE_MAP);
        console.log('satellite');
    } else {
        map.setMapType(BMAP_EARTH_MAP);
        console.log('earth');
    }
  });



function addSecondOverlay(isAdd) {
    if (isAdd) {
        map.addOverlay(marker1);
        map.addOverlay(marker2);
        map.addOverlay(marker3);
    } else {
        map.removeOverlay(marker1);
        map.removeOverlay(marker2);
        map.removeOverlay(marker3);
    }
}

function addFirstOverlay(isAdd) {
    if (isAdd) {
        for (let i=0; i <firstOverlays.length;i++) {
            map.addOverlay(firstOverlays[i]);
        }
    } else {
        for (let i=0; i <firstOverlays.length;i++) {
            map.removeOverlay(firstOverlays[i]);
        }
    }
}


//添加threejs对象
function addThreejsObj(isAdd){
    // var geometry = new THREE.BoxGeometry(5500, 5500, 5000);
    // var material =  new THREE.MeshBasicMaterial( { color: 0xff0000, flatShading: true, wireframe: false } );
    // var cube = new THREE.Mesh(geometry, material);
    // cube.position.x = point.lng;
    // cube.position.y = point.lat; 
    // cube.position.z = 2;
    // threeLayer.add(cube);

    if (isAdd) {
        if (scene != null) {
            threeLayer.add(scene)
        }
    } else {
        if (scene!=null) {
            threeLayer.remove(scene)
        }
    }
}


function addOverlay(isAdd){
    if (isAdd) {
        map.addOverlay(prism);
    } else {
        map.removeOverlay(prism);
    }
}


    })
  </script>
  
  
  
  
  
  <style scoped>
  #allmap{
    width: 100vw;
    height: 100vh;
  }
  </style>